<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width" />
    <title>Responsive Media Chrome Example</title>
    <script type="module" src="../../dist/index.js"></script>
  </head>
  <body>
    <main>
      <h1>Responsive Media Chrome Example</h1>

      <p>This is an example of making Media Chrome responsive using the <code>breakpoint</code> attributes.</p>

      <media-controller breakpoints="sm:384 md:576 lg:768 xl:960" defaultsubtitles>
        <video
          slot="media"
          src="https://stream.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/high.mp4"
          muted
          crossorigin="anonymous"
          playsinline
        >
          <track
            label="thumbnails"
            default
            kind="metadata"
            src="https://image.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/storyboard.vtt"
          />
          <track
            label="English"
            kind="captions"
            srclang="en"
            src="./vtt/en-cc.vtt"
          />
        </video>
        <media-poster-image
          slot="poster"
          src="https://image.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/thumbnail.jpg"
          placeholdersrc=""
        ></media-poster-image>
        <media-loading-indicator slot="centered-chrome" noautohide></media-loading-indicator>
        <div slot="centered-chrome" class="centered-controls-overlay">
          <media-seek-backward-button></media-seek-backward-button>
          <media-play-button></media-play-button>
          <media-seek-forward-button></media-seek-forward-button>
        </div>
        <media-control-bar>
          <media-play-button></media-play-button>
          <media-seek-backward-button seekoffset="15"></media-seek-backward-button>
          <media-seek-forward-button seekoffset="15"></media-seek-forward-button>
          <media-mute-button></media-mute-button>
          <media-volume-range></media-volume-range>
          <media-time-range></media-time-range>
          <media-time-display showduration remaining></media-time-display>
          <media-captions-button></media-captions-button>
          <media-playback-rate-button></media-playback-rate-button>
          <media-pip-button></media-pip-button>
          <media-fullscreen-button></media-fullscreen-button>
          <media-airplay-button></media-airplay-button>
        </media-control-bar>
      </media-controller>

      <p>
        Below is the style tag for this page.
        Take a look at the code comments that explain the usage.
      </p>
      <style>
media-controller:not([audio]) {
  display: block;
  max-width: 1280px;
  aspect-ratio: 16 / 9;
}
video {
  width: 100%;
}

/*
 * By default, we don't want the center controls to show up.
 */
.centered-controls-overlay {
  display: none;
}

/*
 * Starting with the smallest container, this query will be selected
 * if the inline-size of the container is smaller than 384px.
 *
 * It only shows the center controls and hides the bottom control bar.
 *
 */
.centered-controls-overlay {
  display: flex;
}

media-control-bar {
  display: none;
}

/*
 * The middle container size will be selected if the width is between 384px and 576px.
 *
 * Here, move the player toggle and the seek buttons from the bottom
 * control bar to the center controls section to give more breathing
 * room for the other buttons in the control bar.
 *
 */
[breakpointsm] .centered-controls-overlay {
  display: flex;
}

[breakpointsm] media-control-bar {
  display: flex;
}

[breakpointsm]:not([breakpointmd]) media-control-bar :is(
  media-play-button,
  media-seek-backward-button,
  media-seek-forward-button
) {
  display: none;
}

/*
 * The default and larger container size,
 * which will be selected when the container is greater than 576px wide.
 *
 * Since we have a default to hide the .centered-controls-overlay,
 * this query isn't strictly necessary but is included for the sake of completeness.
 *
 */
[breakpointmd] .centered-controls-overlay {
  display: none;
}

[breakpointmd] media-control-bar {
  display: flex;
}

/*
 * Some styles to make the center controls look nicer.
 *
 * Use :where here so that it doesn't override
 * the centered-controls-overlay styles from above.
 */
:where(.centered-controls-overlay) {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-evenly;
}
media-controller .centered-controls-overlay {
  align-self: stretch;
}
[slot='centered-chrome'] {
  margin: 0 15%;
  --media-control-hover-background: none;
  --media-control-background: none;
}
[slot='centered-chrome']:is(media-play-button, media-seek-backward-button, media-seek-forward-button) {
  padding: 0px;
}
[slot='centered-chrome']media-play-button {
  width: 20%;
}
[slot='centered-chrome']:is(media-seek-backward-button, media-seek-forward-button) {
  width: 15%;
}

/*
 * Make the loading spinner take up the entire player size and not
 * interfere with the center controls by setting position to absolute.
 */
media-loading-indicator {
  position: absolute;
  inset: 0;
}

/*
 * Hide unavailable buttons.
 */
media-airplay-button[mediaairplayunavailable],
media-fullscreen-button[mediafullscreenunavailable],
media-volume-range[mediavolumeunavailable],
media-pip-button[mediapipunavailable] {
  display: none;
}

/*
 * Make the style element show up on the page
 */
style {
  display: block;
  white-space: pre;
  font-family: monospace;
  margin-left: 1em;
  overflow-x: auto;
}
      </style>
      <div class="examples">
        <a href="./">View more examples</a>
      </div>
    </main>
  </body>
</html>
